<template>
  <div class="container-position">
    <div class="search-filter mt15">
      <el-row :gutter="20">
        <el-col :span="6">
          <sitem label="公司名称：">
            <el-input slot="item" v-model="listQuery.companyName" placeholder="请输入关键字" />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="职位名称：">
            <el-input slot="item" v-model="listQuery.jobName" placeholder="请输入关键字" />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="招聘类型：">
            <el-select
              slot="item"
              v-model="listQuery.recruitType"
              clearable
              placeholder="请选择"
            >
              <el-option label="全部" value="" />
              <el-option label="社会招聘" value="0" />
              <el-option label="校园招聘" value="1" />
            </el-select>
          </sitem>
        </el-col>
        <el-col v-if="isSpecialSession" :span="6">
          <sitem label="是否被置顶：">
            <el-select
              slot="item"
              v-model="listQuery.recommendFlag"
              clearable
              placeholder="请选择"
            >
              <el-option label="全部" value="" />
              <el-option label="是" value="true" />
              <el-option label="否" value="false" />
            </el-select>
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="专场：">
            <el-select slot="item" v-model="listQuery.ssSessionId" clearable placeholder="请选择">
              <el-option v-for="(item,index) in ssSessionOptions" :key="index" :label="item.itemText" :value="item.itemValue" />
            </el-select>
          </sitem>
        </el-col>
        <el-col :span="8">
          <sitem label="发布日期：">
            <el-date-picker
              slot="item"
              v-model="date"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            />
          </sitem>
        </el-col>

        <el-col :span="6">
          <sitem>
            <el-button
              slot="item"
              type="primary"
              icon="el-icon-search"
              @click="getList(1)"
            >查询</el-button>
          </sitem>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <el-button
        type="primary"
        icon="el-icon-document-add"
        @click="editDrawerShow('创建职位',null,isSpecialSession ? specialSessionId : null)"
      >创建职位</el-button>
      <div v-loading="listLoading" class="list">
        <el-card v-for="(item, index) in list" :key="index" class="item mb15">
          <div class="type-tag">
            <el-tag v-if="item.sysFrom==1&&!isSpecialSession" type="warning" effect="dark" size="mini" class="mr10">企业发布</el-tag>
            <el-tag v-if="item.sysFrom==2&&!isSpecialSession" type="danger" effect="dark" size="mini" class="mr10">平台发布</el-tag>
            <el-tag v-if="item.bsType==0&&!isSpecialSession" type="primary" effect="dark" size="mini" class="mr10">普通职位</el-tag>
            <el-tag v-if="item.bsType==1&&!isSpecialSession" type="success" effect="dark" size="mini" class="mr10">专场职位</el-tag>
            <el-tag style="border: 0" color="#f345b5" effect="dark" size="mini" class="mr10">{{ item.recruitType == 0 ? '社招' : '校招' }}职位</el-tag>
            <el-tag v-if="item.recruitmentState == 1" type="info" effect="dark" size="mini" class="mr10">已关闭</el-tag>
          </div>
          <div class="upper" :class="{pt10: !isSpecialSession||item.recruitmentState == 1}">
            <div class="info">
              <div class="title">
                {{ item.jobName
                }}
                <span class="f14 company-info ml5">{{ item.enInfo ? item.enInfo.enName : '' }}</span>
              </div>
              <div class="limit">
                <span>{{ item.eduLevel_dictText }}</span>
                <span>{{ item.jobMaxAge && item.jobMaxAge > 0 ? item.jobMaxAge + '岁以下' : '年龄不限' }}</span>
                <span> {{ item.jobSex ? (item.jobSex == 1 ? '男':'女'): '性别不限' }} </span>
                <span>{{ item.subject_dictText ? item.subject_dictText : '专业不限' }}</span>
              </div>
            </div>
            <div class="button-group" :class="{mt5: isSpecialSession&&item.recruitmentState != 1}">
              <el-row>
                <el-popconfirm
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="blue"
                  title="您确定复制这个职位吗?"
                  @onConfirm="copy(item.id)"
                >
                  <el-button
                    slot="reference"
                    type="danger"
                    size="small"
                    plain
                  >
                    复制</el-button>
                </el-popconfirm>
                <el-button
                  type="primary"
                  size="small"
                  plain
                  class="ml10"
                  width="150"
                  @click.native="editDrawerShow('编辑职位', item)"
                >编辑</el-button>
                <el-popover
                  v-if="item.recruitmentState == 0"
                  v-model="item.show"
                  class="ml10 mr10"
                  width="150"
                >
                  <el-input-number
                    v-model="item.recommendNo"
                    style="width: 100%"
                    :min="1"
                    label="请输入置顶序号"
                  />
                  <el-button
                    type="primary"
                    class="fr mt10"
                    size="mini"
                    @click="recommend(index)"
                  >确定</el-button>
                  <el-button
                    slot="reference"
                    size="small"
                    type="success"
                    plain
                  >置顶</el-button>
                </el-popover>

                <el-button
                  v-if="item.recruitmentState == 0"
                  size="small"
                  type="warning"
                  plain
                  @click="closePosition(item.id)"
                >关闭</el-button>
                <el-button
                  v-if="item.recruitmentState == 1"
                  size="small"
                  type="success"
                  plain
                  @click="onlinePosition(item.id)"
                >上线</el-button>
                <el-button
                  v-if="item.recruitmentState == 1"
                  size="small"
                  type="danger"
                  plain
                  @click="delPosition(item.id)"
                >删除</el-button>
              </el-row>
            </div>
          </div>
          <div class="lower">
            <el-row>
              <el-col :span="8">
                <div class="statistics">
                  <span>招聘人数：{{ item.needCount }}</span>
                  <span>已入职：<a class="count" @click="goViewDetails(item.id,item.jobName,7)">{{ item.alreadyCount }}</a></span>
                  <span>待招人数：{{
                    parseInt(item.needCount - item.alreadyCount)
                  }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="people-statistics">
                  <span
                    @click="goViewDetails(item.id,item.jobName,0)"
                  >新简历<a class="count">{{ item.notReadCount }}</a><i class="el-icon-arrow-right" /></span>
                  <span
                    class="ml30"
                    @click="goViewDetails(item.id,item.jobName,4)"
                  >目标人选<a class="count">{{ item.stepCount }}</a><i class="el-icon-arrow-right" /></span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="date">

                  <p v-if="item.recruitmentState == 1">
                    {{
                      $moment(item.closeTime, "yyyy-MM-DD HH:mm:ss").format(
                        "yyyy-MM-DD"
                      )
                    }}
                    关闭
                  </p>
                  <p v-else>
                    {{
                      $moment(item.createTime ? item.createTime : item.updateTime, "yyyy-MM-DD HH:mm:ss").format(
                        "yyyy-MM-DD"
                      )
                    }}
                    发布
                  </p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <no-data v-if="noDateView" />
    </div>

    <!-- 弹窗抽屉-->
    <edit-drawer
      ref="editDrawer"
      @refresh="getList"
    />
    <pagination
      v-show="total > 0"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
      layout="total,prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      page-background="none"
      @pagination="pageGetList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 分页
import editDrawer from '@/components/CurriculumVitaeEditDrawer'
import sitem from '@/components/searchItem'
import noData from '@/components/noData'
import { list, recommend, edit, del, publishOrClose, copy } from '@/api/position'
import { sys_dict_by_code } from '@/api/sys_dict'
export default {
  name: '',
  components: { Pagination, editDrawer, noData, sitem },
  props: {
    // 专场id
    specialSessionId: {
      type: String,
      default: ''
    },
    state: {
      type: String,
      default: ''
    },
    isSpecialSession: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      companyName: '',
      jobName: '',
      date: '',
      total: 1,
      list: [],
      noDateView: false,
      listQuery: {
        pageNo: 1,
        pageSize: 5,
        companyName: '',
        jobName: '',
        recruitType: '', // 招聘类型
        createTime_begin: '',
        createTime_end: '',
        recommendFlag: '',
        bsType: 1,
        state: this.state,
        bsId: this.specialSessionId, // 专场id
        recruitmentState: ''
      },
      listLoading: false,
      ssSessionOptions: []
    }
  },
  watch: {
    state(e) {
      this.listQuery.state = e
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList()
    sys_dict_by_code('gxt_ss_session').then(res => {
      this.ssSessionOptions = res.result
    })
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    // 跳转人才库
    goViewDetails(id, jobName, state) {
      this.$router.push({ name: 'talent-pool-seekers', params: {
        id: id,
        jobName: jobName,
        state: state
      }})
    },
    // 打开编辑框
    editDrawerShow(title, data, bsId) {
      this.$refs.editDrawer.show(title, data, bsId)
    },
    // 职位复制
    copy(id) {
      copy({ id: id }).then(res => this.getList())
    },
    // 置顶职位
    recommend(index) {
      const item = this.list[index]
      this.list[index].show = true
      recommend({
        id: item.id,
        recommendNo: item.recommendNo
      }).then((res) => {
        this.$message({
          message: '置顶成功',
          type: 'success'
        })
      })
    },
    // 关闭职位
    closePosition(id) {
      this.$confirm('确定要关闭此职位吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        publishOrClose({ id: id }).then(
          (res) => {
            this.$message({
              message: '关闭成功',
              type: 'success'
            })
            this.getList()
          }
        )
      })
    },
    // 上线职位
    onlinePosition(id) {
      this.$confirm('确定要再次上线此职位吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        publishOrClose({ id: id }).then((res) => {
          this.$message({
            message: '上线成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    // 删除职位
    delPosition(id) {
      this.$confirm('确定要删除此职位吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del({ id: id }).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    // 分页查询
    pageGetList() {
      this.getList()
    },
    getListRecruitmentState(state) {
      if (state == 9) {
        state = ''
      }
      this.listQuery.recruitmentState = state
      this.getList(1)
    },
    // 列表查询
    getList(pageNo) {
      this.listLoading = true

      if (pageNo) {
        this.listQuery.pageNo = pageNo
      }
      const query = this.listQuery
      if (this.date) {
        query.updateTime_begin = this.date[0]
        query.updateTime_end = this.date[1]
      } else {
        query.updateTime_begin = ''
        query.updateTime_end = ''
      }
      list(query).then((res) => {
        this.list = res.result.records
        this.total = res.result.total
        this.listLoading = false
        if (this.list.length == 0) {
          this.noDateView = true
        } else {
          this.noDateView = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container-position {

  .list {
    margin-top: 15px;
    .item {
        position: relative;
        .type-tag{
          position:absolute;
          top: 0;
          left: 20px;
          .el-tag{
            border-radius: 0;
            border-bottom-right-radius: 8px;
          }
        }
      .upper {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1px solid #f3f3f3;
        .title {
          font-size: 16px;
          font-weight: bold;
          line-height: 21px;
          color: #333333;
        }
        .limit {
          font-size: 14px;
          font-weight: 400;
          line-height: 19px;
          color: #919191;
          margin-top: 10px;
          margin-bottom: 15px;
          span {
            margin-right: 20px;
            border-right: 1px solid #e8e8e8;
            padding-right: 20px;
          }
          span:last-child {
            border: none;
          }
        }
      }
      .lower {
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        line-height:20px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-top: 17px;
        .statistics {
          span {
            margin-right: 30px;
            a {
              color: #333333;
              padding-left: 8px;
            }
            .count {
              color: #2d8be9;
            }
          }
        }
        .people-statistics {
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #348ce8;
          span {
            cursor: pointer;
            a {
              padding-left: 8px;
            }
            i {
              color: #666;
              margin-left: 5px;
            }
          }
        }
        .date {
          text-align: right;
          font-size: 12px;
          p {
            margin: 0;
          }
        }
        .date-two{
          position: absolute;
          right: 0;
          top: -10px;
        }
      }
    }
  }
  .wxkj-drawer {
    .drawer-content {
      .ps {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        color: #999999;
        margin-top: 15px;
      }
    }
  }
}
.company-info{
  color: #666;
  line-height: 17px;
}
</style>
